<template>
  <div class="step">
  <section>
    <b-steps
      v-model="activeStep"
      :animated="isAnimated"
      :rounded="isRounded"
      :has-navigation="hasNavigation"
      :icon-prev="prevIcon"
      :icon-next="nextIcon"
      :label-position="labelPosition"
      :mobile-mode="mobileMode">
      <b-step-item step="1" label="PhoneNumber" :clickable="isStepsClickable">
        <h1 class="title has-text-centered">请填入手机号</h1>
        <section style="display: flex;justify-content: center">
          <b-field label="手机号"
                   type="is-success"
                   message="This phone number is available"
                   horizontal>
            <b-input  value="johnsilver" maxlength="30" style="max-width: 400px;"></b-input>
          </b-field>
        </section>
      </b-step-item>

      <b-step-item step="2" label="VerificationCode " :clickable="isStepsClickable" :type="{'is-success': isProfileSuccess}">
        <h1 class="title has-text-centered">请填入验证码</h1>
        <section style="display: flex;justify-content: center;">
        <b-field label="验证码" horizontal style="min-width: 400px;">
          <b-input type="password"
                   value="iwantmytreasure"
                   password-reveal>
          </b-input>
        </b-field>
  </section>
      </b-step-item>
      <b-step-item :step="showSocial ? '3' : '2'" label="Finish" :clickable="isStepsClickable" disabled>
        <h1 class="title has-text-centered">Finish</h1>
        Lorem ipsum dolor sit amet.
      </b-step-item>
      <template
        style="justify-content: center;display: inline;margin-left: 580px;margin-top: 300px"
        v-if="customNavigation"
        #navigation="{previous, next}">
        <b-button
          style="justify-content: center;display: inline;margin-left: 580px;margin-top: 250px;"
          outlined
          type="is-danger"
          icon-pack="fas"
          icon-left="backward"
          :disabled="previous.disabled"
          @click.prevent="previous.action">
          上一步
        </b-button>
        <b-button
          style="justify-content: center;display: inline;margin-left: 20px;margin-top: 250px"
          outlined
          type="is-success"
          icon-pack="fas"
          icon-right="forward"
          :disabled="next.disabled"
          @click.prevent="next.action">
          下一步
        </b-button>
      </template>
    </b-steps>
  </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeStep: 0,
      showSocial: true,
      isAnimated: true,
      isRounded: true,
      isStepsClickable: true,
      hasNavigation: true,
      customNavigation: true,
      isProfileSuccess: true,

      prevIcon: 'chevron-left',
      nextIcon: 'chevron-right',
      labelPosition: 'bottom'
    }
  }
}
</script>
<style>
.step{
  min-width: 1400px;
  min-height: 800px;
}
</style>
